<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>
<body>
    <div id="app"></div>
</body>
</html>
<script>
    //两个组件   
    const Counter = {
        data() {
            return {
                count: 0
            }
        },
        template: `<div>{{count}}<button @click="count++">增加1</button></div>`
    }
    const XieDaJiao = {
        //驼峰命名法 - -  
        template: `<h2>谢大脚</h2>`
    }
    
    const app = Vue.createApp({
            //组件模板  2注册
        components: {
            jspang: Counter,
            'xie-da-jiao': XieDaJiao
        },
            //vue实例模板  
        template: `     
            <h2>JSPang.com</h2>
            <xie-da-jiao />
            <jspang />
        `
    })
    const vm = app.mount("#app")
    //1  创建局部组件 即就是声明一个变量 这个变量是一个对象 外层使用{} 里面和使用Vue.createApp传递的参数一样 
    //2  在Vue.createApp() 方法注册去 
    //3  局部变量也是拥有独立性的，所以可以进行复用。

    /*  组件？
        全局组件相对应的就是局部组件，你可以把局部组件看成一个变量，然后在使用的地方注册这个组件，才可以使用。
        局部组件的最大好处就是只有在使用的时候，才会耗费系统资源，不像全局组件一样，一直都存在
    */
</script>